<template>
	<view class="ys">
		<view class="swiper">
			<swiper :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item>
					<view class="swiper-item">
						<image :src="info.houseImages || '/static/img/room.jpg'" mode=""></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="infobox">
			<view class="name_title">
				温馨舒适两居室，市中心黄金地段
			</view>
			<view class="price">
				<text>{{info.rent}}</text> 元
			</view>
			<view class="tipslist">
				<view class="tips">
					<view class="tips-title">
						{{info.roomName}}
					</view>
					<view class="tips-text">
						房间名
					</view>
				</view>
				<view class="tips">
					<view class="tips-title">
						{{info.roomArea}}
					</view>
					<view class="tips-text">
						建筑面积
					</view>
				</view>
				<view class="tips">
					<view class="tips-title">
						{{info.roomNumber}}
					</view>
					<view class="tips-text">
						房间号
					</view>
				</view>
				<view class="tips">
					<view class="tips-title">
						待出租
						<!-- 		<text v-if="info.roomStatus == '11'">已出租</text>
						<text v-else-if="info.roomStatus == '00'">已出租</text> -->
					</view>
					<view class="tips-text">
						状态
					</view>
				</view>
			</view>
			<view class="map">
				<image src="/static/img/map.png" mode="widthFix"></image>
				<view class="address">
					<view class="address-title">市中心黄金地段的精致两居室公寓
						{{info.contractHouseRes.houseName}}
					</view>
					<view class="address-detail">
						{{info.contractHouseRes.houseStandardAddress}}
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="rent">
			<view class="title">
				签约二维码
			</view>
			<view class="elist">
				<view class="codeimg">
					<uqrcode ref="uqrcode" canvas-id="qrcode" :value="link" @longtap="save">
					</uqrcode>
				</view>
			</view>
		</view> -->
		<view class="rent">
			<view class="title">
				房间设施
			</view>
			<view class="rent-time">
				<!-- <view class="time-name">
					预计2024.07.05可入住
				</view> -->
				<view class="time-tips">
					户型：两室一厅一卫，布局合理，空间宽敞。<br>
					面积：约80平方米，足够容纳您的日常生活所需。<br>
					楼层：位于中层（具体楼层可面议），采光和通风效果极佳。<br>
					{{info.roomFacilities}}
				</view>
			</view>
			<view class="title" style="margin-top: 10px;">
				安全设施
			</view>
			<view class="rent-time">
				<!-- <view class="time-name">
					预计2024.07.05可入住
				</view> -->
				<view class="time-tips">
					1.门禁系统：<br>

					智能门锁：采用先进的智能门锁技术，支持指纹、密码、手机APP等多种开锁方式，有效防止非法入侵。<br>
					可视对讲：配备可视对讲系统，访客来访时，您可以通过手机APP或室内对讲机查看并确认访客身份，确保安全。<br><br>
					2. 监控系统：<br>
					高清摄像头：在公共区域和关键位置安装高清摄像头，24小时不间断监控，记录任何异常情况。<br>
					云存储服务：视频资料自动上传至云端，支持远程查看和回放，确保安全无死角。<br>
					{{info.safetyFacilities}}
				</view>
			</view>

			<view class="price">
				<view class="p-title">
					费用详情
				</view>
				<view class="plist">
					<view class="p-item">
						<view class="p-text">
							付款方式
						</view>
						<view class="p-msg">
							年付
						</view>
					</view>
					<view class="p-item">
						<view class="p-text">
							押金
						</view>
						<view class="p-msg">
							{{info.securityDeposit}}
						</view>
					</view>
					<view class="p-item">
						<view class="p-text">
							中介费
						</view>
						<view class="p-msg">
							需咨询
						</view>
					</view>
					<view class="p-item">
						<view class="p-text">
							押金
						</view>
						<view class="p-msg">
							1800元
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="rent">
			<view class="title">
				房源简介
			</view>
			<view class="elist">
				<view class="eitem">
					户型：两室一厅一卫，布局合理，空间宽敞。<br>
					面积：约80平方米，足够容纳您的日常生活所需。<br>
					楼层：位于中层（具体楼层可面议），采光和通风效果极佳。<br>
					装修：现代简约风格，采用环保材料装修，家具家电齐全，拎包即可入住。<br>
					地理位置：<br>

					交通：紧邻地铁站和公交站，多条公交线路直达，出行方便快捷。<br>
					商圈：周边购物中心、超市、餐饮娱乐设施一应俱全，满足您的购物和休闲需求。<br>
					学校：附近有多所知名学校，教育资源丰富，适合有学龄儿童的家庭居住。<br>
					房屋亮点：<br>

					观景阳台：宽敞的观景阳台，让您在忙碌之余享受城市的繁华与宁静。<br>
					智能家居：配备智能家居系统，通过手机即可控制家中的灯光、空调等设备，提升生活品质。<br>
					安全保障：小区24小时安保巡逻，门禁系统严格，让您住得安心。<br>
					租金与押金：

					租金：面议（可根据您的需求进行协商）
					押金：一般为两个月租金
					{{info.roomDescription}}
				</view>
			</view>
		</view>

		<view class="fot">
			<view class="btns">
				<button class="call" open-type="share">
					立即租赁
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		houselist,
		contract,
		detail
	} from "@/api/owner.js"
	export default {
		data() {
			return {
				eList: [1, 2, 3, 4, 5, 6, 7],
				id: '',
				info: [],
				link: '',
				houseId: '',
				roomId: '',
			}
		},
		onLoad(e) {
			if (e.houseId) this.houseId = e.houseId
			if (e.roomId) this.roomId = e.roomId
			this.link = `/pages/tenant/sign?houseId=${this.houseId}&roomId=${this.roomId}`
			this.contract()
		},
		onReady() {
			if (this.$refs.uqrcode) {
				this.$refs.uqrcode.toTempFilePath({
					success: res => {}
				});
			}
		},
		methods: {

			contract() {
				contract(this.roomId).then(res => {
					if (res.code == 200) this.info = res.data
				})
			},
			saveImg() {
				var that = this
				that.$refs.uqrcode.save({
					success: res => {
						uni.$showMsg('保存成功')
					}
				});

			},

			houselist() {
				houselist({
					houseName: this.id
				}).then(r => {
					if (r.code == 200) {
						this.info = res.data
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		padding-bottom: 55px;
		background: #f2f2f2;
	}

	.rent {
		background: #fff;
		border-radius: 10px;
		width: 96%;
		margin: 0 auto;
		margin-top: 10px;
		padding: 15px;
		box-sizing: border-box;

		.title {
			font-weight: bold;
			font-size: 18px;
		}

		.elist {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			margin-top: 10px;

			.codeimg {
				padding: 10px;
				box-sizing: border-box;
				width: 100%;
				display: flex;
				justify-content: center;

				image {
					width: 50%;
				}
			}

			.eitem {
				width: 100%;
				font-size: 13px;
				// display: flex;
				// justify-content: space-between;
				padding: 5px 0;
				color: #777;
			}
		}

		.rent-time {
			margin-top: 15px;

			.time-name {
				font-weight: bold;
				font-size: 17px;
			}

			.time-tips {
				font-size: 13px;
				color: #888;
				margin-top: 2px;
			}
		}

		.price {
			margin-top: 15px;

			.p-title {
				font-weight: bold;
				font-size: 18px;
			}

			.plist {
				display: flex;
				justify-content: space-between;
				margin-top: 10px;

				.p-item {
					font-size: 13px;
					color: #777;

					.p-msg {
						margin-top: 8px;
						color: #333;
					}
				}
			}
		}
	}

	.swiper {
		swiper {
			height: 50vh;

			.swiper-item {
				height: 100%;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.fot {
		position: fixed;
		bottom: 0;
		height: 50px;
		width: 100%;
		left: 50%;
		transform: translate(-50%);
		z-index: 1025;
		background: #fff;
		box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.1);
		padding: 5px 10px;
		box-sizing: border-box;

		.btns {
			display: flex;
			justify-content: space-between;
		}

		.like {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: 12px;
			width: 10%;
		}

		.call {
			background: #FC7941;
			color: #fff;
			border-radius: 20px;
			text-align: center;
			height: 40px;
			line-height: 40px;
			letter-spacing: 1px;
			font-weight: bold;
			width: 100%;
			font-size: 14px;
		}
	}

	.infobox {
		background: #fff;
		border-top-right-radius: 12px;
		border-top-left-radius: 12px;
		margin-top: -20px;
		position: relative;
		z-index: 1024;
		padding: 20px;
		box-sizing: border-box;

		.name_title {
			font-weight: bold;
			font-size: 17px;
			margin-bottom: 10px;
		}

		.map {
			margin-top: 15px;
			height: 120px;
			overflow: hidden;
			border-radius: 8px;
			position: relative;

			image {
				width: 100%;
				opacity: .8;
			}

			.address {
				position: absolute;
				top: 20%;
				left: 20px;
				width: 80%;

				.address-title {
					font-weight: bold;
					margin-bottom: 15px;
				}

				.address-detail {
					width: 80%;
					font-size: 13px;
					color: #777;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}

		.price {
			color: #FC7941;

			text {
				font-size: 28px;
				margin-right: 3px;
			}
		}

		.tipslist {
			display: flex;
			justify-content: space-between;
			margin-top: 20px;

			.tips {
				display: flex;
				flex-direction: column;

				.tips-title {
					font-weight: bold;
				}

				.tips-text {
					font-size: 13px;
					color: #777;
					margin-top: 2px;
				}
			}
		}
	}
</style>